<template>
  <a-layout>
    <!-- <div class="head">
      <div class="operation">
        <a-input-search allow-clear class="mr12" placeholder="姓名/手机号/身份证号" style="width: 180px" @search="inputChange" />
        <a-select style="width: 180px" @change="handleChange" allowClear placeholder="员工状态">
          <a-select-option value="1">
            待入职
          </a-select-option>
          <a-select-option value="2">
            在职
          </a-select-option>
          <a-select-option value="3">
            待离职
          </a-select-option>
          <a-select-option value="4">
            离职
          </a-select-option>
        </a-select>
      </div>
      <div>
        <a-button style="margin-right:10px" :disabled="!selectedRowKeys.length" @click="() => download(1)">
          批量导出
        </a-button>
        <a-button :disabled="!dataList || !dataList.length" type="primary" style="margin-right:10px" @click="() => download(2)">
          全部导出
        </a-button>
      </div>
    </div> -->
    <div class="tableBox">
      <TableBody
        selectHead
        selection
        tableName="declareEmpDetails"
        :selectedRowKeys.sync="selectedRowKeys"
        :source="dataList"
        :headerRowID="'sortable_list_declareEmpDetails'"
        :columns="columns"
        @onReload="getIncomeTaxList"
        @onExport="() => download(1)"
        @onExportAll="() => download(2)"
      >
        <template slot="search">
          <a-input-search allow-clear placeholder="姓名/手机号/身份证号" style="width: 180px" v-model="search1" @search="inputChange" />
          <a-select style="width: 180px" v-model="search2" @change="handleChange" allowClear placeholder="员工状态">
            <a-select-option value="1">
              待入职
            </a-select-option>
            <a-select-option value="2">
              在职
            </a-select-option>
            <a-select-option value="3">
              待离职
            </a-select-option>
            <a-select-option value="4">
              离职
            </a-select-option>
          </a-select>
        </template>
        <template slot-scope="prop">
          <a-table
            :class="prop.className"
            :components="prop.components"
            :columns="prop.columns"
            :scroll="{ x: prop.scrollWidth }"
            :customHeaderRow="
              () => {
                return {
                  domProps: {
                    id: prop.headerRowID
                  }
                };
              }
            "
            :loading="loading"
            :data-source="dataList"
            :pagination="pagination"
            @change="handleTableChange"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
          >
            <a slot="empName" style="position:relative;cursor: default;" slot-scope="text, record">
              <img :src="abolitionImg" v-if="record.status === 4" style="position:absolute;top:-16px;left:-15px;width:50px;height:50px" />
              <p style="margin-left:20px;margin-bottom:0;color:#595959">
                {{ text }}
              </p>
            </a>
            <a slot="gender" slot-scope="text" style="cursor:pointer;color:#595959">
              <span v-if="text === 1">男</span>
              <span v-if="text === 2">女</span>
            </a>
            <template slot="status" slot-scope="text">
              {{ ["待入职", "在职", "待离职", "离职"][text - 1] }}
            </template>
            <a slot="birthday" slot-scope="text" style="cursor:pointer;color:#595959">
              {{ text ? moment(parseInt(text)).format("YYYY-MM-DD") : null }}
            </a>
            <a slot="certificateType" slot-scope="text" style="cursor:pointer;color:#595959">
              {{ certificate[parseInt(text)] }}
            </a>
            <a slot="employmentType" slot-scope="text" style="cursor:pointer;color:#595959">
              {{ employmentType[parseInt(text) - 1] }}
            </a>
          </a-table>
        </template>
      </TableBody>
    </div>
  </a-layout>
</template>
<script>
const employmentType = ["雇员", "保险营销员", "证券经纪人", "实习学生（全日制学历教育）", "其他"];
const certificate = [
  "中国护照",
  "居民身份证",
  "港澳居民来往内地通行证",
  "台湾居民来往大陆通行证",
  "外国护照",
  "中华人民共和国港澳居民居住证",
  "中华人民共和国台湾居民居住证",
  "外国人永久居留身份证",
  "中华人民共和国外国人工作许可证（A类）",
  "中华人民共和国外国人工作许可证（B类）",
  "中华人民共和国外国人工作许可证（C类）",
  "其他个人证件"
];
const columns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName",
    fixed: "left",
    width: 170,
    colDefault: true,
    isEdit: false,
    scopedSlots: { customRender: "empName" }
  },
  {
    title: "证件类型",
    dataIndex: "certificateType",
    key: "certificateType",
    width: 150,
    colDefault: true,
    isEdit: false,
    scopedSlots: { customRender: "certificateType" }
  },
  {
    title: "证件号码",
    dataIndex: "idCard",
    key: "idCard",
    colDefault: true,
    isEdit: false,
    width: 180
  },
  {
    title: "国籍(地区)",
    dataIndex: "nationality",
    key: "nationality",
    colDefault: true,
    width: 100
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    colDefault: true,
    scopedSlots: { customRender: "gender" },
    width: 100
  },
  {
    title: "出生日期",
    dataIndex: "birthday",
    key: "birthday",
    colDefault: true,
    scopedSlots: { customRender: "birthday" },
    width: 150
  },
  {
    title: "人员状态",
    dataIndex: "status",
    key: "status",
    colDefault: true,
    width: 100,
    scopedSlots: { customRender: "status" }
  },
  {
    title: "任职受雇从业类型",
    dataIndex: "employmentType",
    key: "employmentType",
    colDefault: true,
    width: 150,
    scopedSlots: { customRender: "employmentType" }
  },
  {
    title: "入职年度就业情形",
    dataIndex: "employmentSituation",
    key: "employmentSituation",
    colDefault: true,
    width: 150
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
    colDefault: true,
    width: 150
  },
  {
    title: "任职受雇从业日期",
    dataIndex: "joinDate",
    key: "joinDate",
    colDefault: true,
    width: 150
  },
  {
    title: "离职日期",
    dataIndex: "leaveDate",
    key: "leaveDate",
    colDefault: true,
    width: 100
  },
  {
    title: "是否残疾",
    dataIndex: "disability",
    key: "disability",
    colDefault: true,
    width: 100
  },
  {
    title: "是否烈属",
    dataIndex: "martyr",
    key: "martyr",
    colDefault: true,
    width: 100
  },
  {
    title: "是否孤老",
    dataIndex: "oldOrNot",
    key: "oldOrNot",
    colDefault: true,
    width: 100
  },
  {
    title: "残疾证号",
    dataIndex: "disabilityCertificateNumber",
    key: "disabilityCertificateNumber",
    colDefault: true,
    width: 100
  },
  {
    title: "烈属证号",
    dataIndex: "martyrCertificateNumber",
    key: "martyrCertificateNumber",
    colDefault: true,
    width: 100
  },
  {
    title: "是否扣除减除费用",
    dataIndex: "deduction",
    key: "deduction",
    colDefault: true,
    width: 150
  },
  {
    title: "个人投资额 ",
    dataIndex: "personalInvestment",
    key: "personalInvestment",
    colDefault: true,
    width: 120
  },
  {
    title: "个人投资比例(%)",
    dataIndex: "personalInvestmentRatio",
    key: "personalInvestmentRatio",
    colDefault: true,
    width: 150
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    colDefault: true,
    width: 100
  },
  {
    title: " 中文名",
    dataIndex: "empName",
    key: "empName2",
    colDefault: true,
    width: 100
  },
  {
    title: "涉税事由",
    dataIndex: "taxRelatedReasons",
    key: "taxRelatedReasons",
    colDefault: true,
    width: 100
  },
  {
    title: "出生国家(地区)",
    dataIndex: "countryOfBirth",
    key: "countryOfBirth",
    colDefault: true,
    width: 140
  },
  {
    title: " 首次入境时间",
    dataIndex: "firstEntryTime",
    key: "firstEntryTime",
    colDefault: true,
    width: 120
  },
  {
    title: "预计离境时间",
    dataIndex: "estimatedDepartureTime",
    key: "estimatedDepartureTime",
    colDefault: true,
    width: 120
  },
  {
    title: "其他证件类型",
    dataIndex: "otherDocumentType",
    key: "otherDocumentType",
    colDefault: true,
    width: 120
  },

  {
    title: "其他证件号码",
    dataIndex: "otherIDNumber",
    key: "otherIDNumber",
    colDefault: true,
    width: 120
  },
  {
    title: " 户籍所在地（省）",
    dataIndex: "domicileProvince",
    key: "domicileProvince",
    colDefault: true,
    width: 150
  },
  {
    title: " 户籍所在地（市）",
    dataIndex: "domicileCity",
    key: "domicileCity",
    colDefault: true,
    width: 150
  },
  {
    title: "户籍所在地（区县）",
    dataIndex: "domicileDistrict",
    key: "domicileDistrict",
    colDefault: true,
    width: 170
  },
  {
    title: "户籍所在地（详细地址）",
    dataIndex: "domicileAddress",
    key: "domicileAddress",
    colDefault: true,
    width: 190
  },
  {
    title: " 经常居住地（省）",
    dataIndex: "habitualResidenceProvince",
    key: "habitualResidenceProvince",
    colDefault: true,
    width: 170
  },
  {
    title: "经常居住地（市）",
    dataIndex: "habitualResidenceCity",
    key: "habitualResidenceCity",
    colDefault: true,
    width: 150
  },
  {
    title: " 经常居住地（区县）",
    dataIndex: "habitualResidenceDistrict",
    key: "habitualResidenceDistrict",
    colDefault: true,
    width: 170
  },
  {
    title: " 经常居住地（详细地址）",
    dataIndex: "habitualResidenceAddress",
    key: "habitualResidenceAddress",
    colDefault: true,
    width: 190
  },
  {
    title: "联系地址（省）",
    dataIndex: "province",
    key: "province",
    colDefault: true,
    width: 150
  },
  {
    title: " 联系地址（市）",
    dataIndex: "city",
    key: "city",
    colDefault: true,
    width: 150
  },
  {
    title: "联系地址（区县）",
    dataIndex: "district",
    key: "district",
    colDefault: true,
    width: 150
  },
  {
    title: "联系地址（详细地址）",
    dataIndex: "address",
    key: "address",
    colDefault: true,
    width: 190
  },
  {
    title: "电子邮箱",
    dataIndex: "email",
    key: "email",
    colDefault: true,
    width: 100
  },
  {
    title: "学历",
    dataIndex: "highestEducation",
    key: "highestEducation",
    colDefault: true,
    width: 100
  },
  {
    title: "开户银行",
    dataIndex: "bankName",
    key: "bankName",
    colDefault: true,
    width: 100
  },
  {
    title: "银行账号",
    dataIndex: "bankCard",
    key: "bankCard",
    colDefault: true,
    width: 100
  },
  {
    title: "开户行省份",
    dataIndex: "bankProvince",
    key: "bankProvince",
    colDefault: true,
    width: 120
  },
  {
    title: "职务",
    dataIndex: "position",
    key: "position",
    colDefault: true,
    width: 100
  }
];
import { getIncomeTax } from "@/api/tax/tax";
import moment from "moment";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
export default {
  mixins: [mixin],

  data() {
    return {
      abolitionImg: require("@/assets/home/lizhi.png"),
      employmentType,
      certificate,
      inputName: null,
      loading: false,
      selectedRowKeys: [],
      selectRowKey: [],
      dataList: [],
      columns,
      empStatus: undefined,
      empIdList: [],
      groupList: [],
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      search1: "",
      search2: undefined
    };
  },

  created() {
    this.getIncomeTaxList();
  },

  beforeDestory() {},
  methods: {
    handleChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.empStatus = e;
      this.getIncomeTaxList();
    },
    onSelectChange(selectedRowKeys, e) {
      this.empIdList = [];
      this.selectedRowKeys = selectedRowKeys;
      e.forEach((item, index) => {
        this.empIdList.push(item.empId);
      });
    },
    download(i) {
      const token = this.$store.state.auth.token;
      if (i === 2) {
        this.exportData = {
          companyId: this.companyId,
          empIdList: [],
          status: this.empStatus ? this.empStatus : undefined,
          nameOrPhoneOrIdCard: this.inputName ? this.inputName : undefined
        };
      } else {
        this.exportData = {
          companyId: this.companyId,
          empIdList: this.empIdList
        };
      }

      this.url = `/salary/api/v1/specialAdditionalDetails/exportTaxPersonalInformation`;
      this.excelName = `${this.$store.state.hr.companyName}_` + "个税人员信息申报导出详情" + ".xlsx";
      this.postDownload();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getIncomeTaxList();
    },
    getIncomeTaxList() {
      this.loading = true;
      getIncomeTax({
        status: this.empStatus,
        name: this.inputName,
        companyId: this.companyId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        "orders[0].property": "status",
        "orders[0].desc": true
      }).then(res => {
        this.selectedRowKeys = [];
        this.loading = false;
        this.dataList = res.data.entities || [];
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getIncomeTaxList();
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.head {
  // padding: 20px;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  .anticon-left {
    color: #595959;
    font-size: 20px;
    margin-top: 18px;
  }
  .left2 {
    z-index: 3;
    left: 65px;
    position: absolute;
    color: #595959;
    font-size: 16px;
    margin-top: -3px;
  }
}
</style>
